<template>
    <div class="programmer_detail">
        <mt-header title="个人详情页">
            <router-link to="" slot="left">
                <mt-button @click="goBackFun()"></mt-button>
            </router-link>
            <mt-button slot="right"></mt-button>
        </mt-header>
        <div class="base_info_wrap mb30 p30">
            <div class="base_info mb30">
                <img :src='imgSrc + detailTop.image' alt="">
                <!-- <img :src='detailTop.image' alt=""> -->
                <div class="base_indo_pro">
                    <span>{{ detailTop.nickName }}&nbsp;·&nbsp;{{ detailTop.position }}</span>
                    <span>{{ detailTop.company }}</span>
                </div>
                <span class="unit_price">{{ detailTop.price }}元/天</span>
            </div>
            <div class="interactive_wrap">
                <p>
                    <img src="../../assets/images/star@2x.png" alt="">
                    赞&ensp;12
                </p>
                <p>
                    <img src="../../assets/images/guanzhu@2x.png" alt="">
                    关注&ensp;33
                </p>
                <p>
                    <img src="../../assets/images/fensi@2x.png" alt="">
                    粉丝&ensp;43
                </p>
            </div>
        </div>

        <div class="word_limit_des mb30 p30">
            <h3 class="myh3">工作限制说明</h3>
            <div class="work_limit_info mb30">
                <p class="work_time">可工作时间：{{ resState.workTime }}</p>
                <p class="work_address">可工作地点：{{ resState.workAddress }}</p>
            </div>
            <div class="evaluate_info mb30">
                <router-link :to="{name:'commentList',params:{id:16}}">
                    <p class="success_percent">成功率：{{  ((resState.sumStar/resState.commentNum)/5*100).toFixed(2)  }}%</p>
                    <p class="evaluate_num">
                        <span>好评度：</span>
                        <img v-if="Math.floor(resState.sumStar/resState.commentNum) == 1"  class="img_wrap" src="../../assets/images/star1@2X.png" alt="">
                        <img v-else-if="Math.floor(resState.sumStar/resState.commentNum) == 2"  class="img_wrap" src="../../assets/images/star2@2X.png" alt="">
                        <img v-else-if="Math.floor(resState.sumStar/resState.commentNum) == 3"  class="img_wrap" src="../../assets/images/star3@2X.png" alt="">
                        <img v-else-if="Math.floor(resState.sumStar/resState.commentNum) == 4"  class="img_wrap" src="../../assets/images/star4@2X.png" alt="">
                        <img v-else-if="Math.floor(resState.sumStar/resState.commentNum) == 5"  class="img_wrap" src="../../assets/images/star5@2X.png" alt="">
                        <span>({{ resState.commentNum }}人评论)</span>
                    </p>
                    <span class="right_arrow"></span>
                </router-link>
            </div>
        </div>

        <div class="selfIntroduction mb30 p30">
            <h3 class="myh3">个人介绍</h3>
            <p class="self_base_info">{{ perIntro.sex == 1?"男":"女" }}&ensp;|&ensp;{{ perIntro.age }}岁&ensp;|&ensp;{{ perIntro.city }}&ensp;|&ensp;{{ perIntro.workLength }}年工作经验</p>
            <p class="self_base_des">{{ perIntro.introduction }}</p>
        </div>

        <div class="work_experience experience_wrap mb30 p30">
            <h3 class="myh3">工作经历</h3>
            <ul>
                <li v-for="(item,index) in workExperList" :key="index">
                    <h4>
                        {{ item.company }}
                        <span >已认证</span>
                    </h4>
                    <p class="work_info_con">
                        <span class="position_name">{{ item.position }}</span>
                        <span class="date_el">{{ item.startTime | formatDate("YYYY-MM-DD") }}-{{ item.endTime | formatDate("YYYY-MM-DD") }}</span>
                    </p>
                    <p class="des">{{ item.experienceDesc }}</p>
                </li>
            </ul>
        </div>

        <div class="educational_experience experience_wrap  mb30 p30">
            <h3 class="myh3">教育经历</h3>
            <ul>
                <li v-for="(item,index) in eduExperList" :key="index">
                    <h4>{{ item.school }}</h4>
                    <p class="work_info_con">
                        <span class="position_name">{{ item.specialty }}</span>
                        <span class="date_el">{{ item.startTime | formatDate("YYYY-MM-DD") }}-{{ item.endTime | formatDate("YYYY-MM-DD") }}</span>
                    </p>
                    <p class="des">{{ item.experienceDesc }}</p>
                </li>
            </ul>
        </div>

        <div class="skill_wrap mb30 p30">
            <h3 class="myh3">技能</h3>
            <ul>
                <li  v-for="(item,index) in skillList" :key="index">
                    <p>
                        <span class="skill_name">{{ item.skillName }}</span>
                        <span class="front_scroll" :style="{width:item.skillLevel/10*100+'%'}"></span>
                        <span class="back_scroll"></span>
                    </p>
                </li>
            </ul>
        </div>

        <div class="works_wrap mb30 p30">
            <h3 class="myh3">作品</h3>
            <ul>
                <li  v-for="(item,index) in projectList" :key="index">
                     <router-link :to="{name:'worksDetail',params:{id:item.id }}">
                        <img src='../../assets/images/programmer1@2x.png' alt="">
                        <div class="works_des_wrap">
                            <h5>{{ item.projectName }}</h5>
                            <p>{{ item.infoDesc | cutStr(32) }}</p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>

        <div class="influences_wrap mb30 p30">
            <h3 class="myh3">专业社区影响力</h3>
            <ul>
                <li class="clearfix">
                    <img src="../../assets/images/github@2x.png" alt="">
                    <p>github</p>
                </li>
            </ul>
        </div>

        <div class="btn_wrap">
            <button>和TA聊聊</button>
            <button @click="goToReserve(detailTop.userID)">立即预约</button>
        </div>

    </div>
</template>

<script>
export default {
    name:'programmerDetail',
    data() {
        return {
            imgSrc:'http://47.102.103.40:8088',
            proComInf:{},
            detailTop:{},
            resState:{},
            perIntro:{},
            workExperList:[],
            eduExperList:[],
            skillList:[],
            projectList:[],
        }
    },
    created() {
        let userId = this.$route.params.id;
        console.log(userId);
        this.$Axios.get(`/api/user/userInfo/${userId}`).then((res)=>{
            let resData = res.data.proInfoDetail;
            this.detailTop = resData.detailTop;
            this.proComInf = resData.proComInf;
            this.resState = resData.resState;
            this.perIntro = resData.perIntro;
            this.workExperList = resData.workExper;
            this.eduExperList = resData.eduExper;
            this.skillList = resData.skillList;
            this.projectList = resData.projectList;
        }).catch((error)=>{
            this.$toast(error);
        })
    },
    methods: {
        goToReserve(id){
            this.$router.push({
                name:'reserve',
                params:{
                id:id
                }
            })
        },
        goBackFun(){
            console.log(this.$route.query.app)
            if(this.$route.query.app){
                window.webkit.messageHandlers.programmerDetail.postMessage({});
            }else{
                this.$router.go(-1)
            }
            
        }
    },
}
</script>

<style scoped lang="scss">
$basecolor:#fff;
$color1:#8DC43D;
$color2:#FB9427;
$color3:#2B2B2B;
$color4:#555;
$bdashed:1px dashed #b9b9b9;
$leftBorder:8px solid $color1;
.mb30{margin-bottom: 30px;}
.p30{padding:30px;background:$basecolor;}
.myh3{
    font-size: 32px;
    color: $color3;
    padding-left: 14px;
    margin-bottom: 30px;
    border-left: $leftBorder;
}
.base_info_wrap{
    .base_info{
        align-items: center;
        display: flex;
        padding-bottom: 30px;
        border-bottom: $bdashed;
        img{
            display: inline-block;
            width: 88px;
            height: 88px;
            border-radius: 10px;
        }
        .base_indo_pro{
            flex: 2;
            font-size: 24px;
            padding-left: 20px;
            color: $color4;
            span{
                display: block;
                &:nth-child(1){
                    font-size: 32px;
                    font-weight: 700;
                    color: $color4;
                    padding-bottom: 10px;
                }
            }
        }
        .unit_price{
            flex: .8;
            font-size: 30px;
            font-weight: 700;
            text-align: right;
            color: $color1;
        }
    }
    .interactive_wrap{
        display: flex;
        p{
            flex: 1;
            height: 40px;
            text-align: center; 
            border-right: 1px solid #b9b9b9;
            font-size: 28px;
            color: $color2;
            img{
                width: 20px;
                height: 20px;
            }
            &:last-child{
                border: none;
            }
        }
    }
}
.word_limit_des{
    .work_limit_info,.evaluate_info{
        padding-left: 22px;
        padding-bottom: 40px;
        border-bottom: $bdashed;
        p{
            font-size: 28px;
            padding-bottom: 20px;
            &:last-child{
                padding-bottom: 0;
            }
        }
    }
    .evaluate_info{
        position: relative;
        border:  0;
        margin-bottom: 0;
        padding-bottom: 0;
        p{
            display: flex;
            align-items: center
            span{
                flex: 2;
            }
            img{
                width: 112px;
                height: 21px;
                padding-top: 8px;
                margin-right:10px;
            }
            &:last-child{
                padding-bottom: 0;
            }
        }
        .right_arrow{   
            position: absolute;
            top:50%;
            margin-top: -12px;
            right: 0;
            width: 14px;
            height: 24px;
            background: url('../../assets/images/rightArrow@2x.png');
            background-size: contain;
        }
    }
}
.selfIntroduction{
    .self_base_info{
        font-weight: 700;
        font-size: 28px;
        padding-left: 22px;
        color: $color3;
    }
    .self_base_des{
        font-size: 28px;
        color: $color4;
        left: 1.5em;
        padding: 24px;
        padding-left: 22px;
    }
}
.experience_wrap{
    ul{
        padding-left: 22px;
        li{
            font-size: 28px;
            color: $color4;
            padding-bottom: 40px;
            h4{
                color: $color3;
                font-size: 30px;
                font-weight: 700;
                padding-bottom: 20px;
                span{
                    margin-left: 16px;
                    padding:5px 10px;
                    font-size: 22px;
                    color: $color1;
                    text-align: center;
                    border:1px solid $color1;
                    border-radius: 8px;
                }
            }
            .work_info_con{
                padding-bottom: 20px;
                display: flex;
                span{
                    flex: 1;
                    text-align: left;
                    font-weight: 700;
                    color: $color3;
                    &:last-child{
                        flex: 2;
                        text-align: right;
                        font-weight: normal;
                    }
                }
                .date_el{font-size: 24px;}
            }

        }
    }
}
.skill_wrap{
    ul{
        padding-left: 22px;
        li{
            width:100%;
            overflow: hidden;
            height: 75px;
            p{
                position:relative;
                .skill_name{
                    position: absolute;
                    top:0;
                    left:0;
                    font-size: 28px;
                    color: $color4;
                }
                .front_scroll,.back_scroll{
                    position: absolute;
                    top:40px;
                    left:0;
                    height: 12px;
                }
                .front_scroll{
                    z-index:2;
                    background: $color1;
                }
                .back_scroll{
                    width: 100%;
                    background: #f1f1f1;
                }
            }
        }
    }
}
.works_wrap{
    ul{
        padding-left: 22px;
        li{
            font-size: 28px;
            align-items: center;
            margin-bottom: 20px;
            a{
                display: flex;
                img{
                    width: 160px;
                    height: 120px;
                    border-radius: 10px;
                }
                .works_des_wrap{
                    padding-left: 20px;
                    flex: 4;
                    h5{
                        color: $color3;
                        padding-bottom: 10px;
                    }
                    p{
                        line-height: 1.5em;
                        color: $color4;
                    }
                }
            }
        }
    }
}
.influences_wrap{
    padding-bottom: 110px;
    ul{
        padding-left: 22px;
        li{
            font-size: 28px;
            align-items: center;
            margin-bottom: 20px;
            display: flex;
            img{
                width: 36px;
                height: 36px;
                margin-top: 2px;
            }
            p{
                margin-left: 20px;
            }
        }
    }
}
.btn_wrap{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index:3;
    width: 100%;
    height: 90px;
    display: flex;
    button{
        flex: 1;
        background: $color2;
        font-size: 34px;
        color: #fff;
        &:last-child{
            background: $color1;
        }
    }
}
</style> 